<script setup lang="ts">
import { ref } from "vue";
import SvgIcon from "../components/SvgIcon.vue";

const emit = defineEmits(["onMenuChange"]);
const props = withDefaults(
  defineProps<{
    isCollapse: boolean;
    activeMenu: string;
  }>(),
  {
    isCollapse: false,
    activeMenu: "1",
  }
);
const hoverMenu = ref("");
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const onMenuChange = (index) => {
  emit("onMenuChange", index);
};
</script>

<template>
  <el-menu
    :default-active="activeMenu"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    :collapse-transition="false"
    @select="onMenuChange"
    @open="handleOpen"
    @close="handleClose"
    style="--el-menu-item-height: 38px; --el-menu-text-color: #202738"
  >
    <div class="aside-menu__group--text" v-if="!isCollapse">配送</div>
    <el-menu-item
      index="1"
      @mouseenter="hoverMenu = '1'"
      @mouseleave="hoverMenu = ''"
    >
      <div class="collapse-container" v-if="isCollapse">
        <SvgIcon
          name="shipped"
          :style="{
            width: '20px',
            height: '20px',
          }"
        />
        <span style="color: inherit">待发货</span>
        <span :class="['point', { isHover: hoverMenu === '1' }]">
          {{ hoverMenu === "1" ? "20" : "" }}
        </span>
      </div>
      <template #title>
        <div class="aside-menu__item--text">
          <span>待发货</span>
          <span v-if="!isCollapse" class="num">20</span>
        </div>
      </template>
    </el-menu-item>
    <el-menu-item
      index="2"
      @mouseenter="hoverMenu = '2'"
      @mouseleave="hoverMenu = ''"
    >
      <div class="collapse-container" v-if="isCollapse">
        <SvgIcon
          name="package"
          :style="{
            width: '20px',
            height: '20px',
          }"
        />
        <span style="color: inherit">待打包</span>
        <span :class="['point', { isHover: hoverMenu === '2' }]">
          {{ hoverMenu === "2" ? "20" : "" }}
        </span>
      </div>
      <template #title>
        <div class="aside-menu__item--text">
          <span>待打包</span>
          <span v-if="!isCollapse" class="num">20</span>
        </div>
      </template>
    </el-menu-item>
    <el-menu-item
      index="3"
      @mouseenter="hoverMenu = '3'"
      @mouseleave="hoverMenu = ''"
    >
      <div class="collapse-container" v-if="isCollapse">
        <SvgIcon
          name="delivered"
          :style="{
            width: '20px',
            height: '20px',
          }"
        />
        <span style="color: inherit">已发货</span>
        <span :class="['point', { isHover: hoverMenu === '3' }]">
          {{ hoverMenu === "3" ? "846" : "" }}
        </span>
      </div>
      <template #title>
        <div class="aside-menu__item--text">
          <span>已发货</span>
          <span v-if="!isCollapse" class="num">846</span>
        </div>
      </template>
    </el-menu-item>
    <div class="aside-menu__group--text" v-if="!isCollapse">售后</div>
    <el-menu-item
      index="4"
      @mouseenter="hoverMenu = '4'"
      @mouseleave="hoverMenu = ''"
    >
      <div class="collapse-container" v-if="isCollapse">
        <SvgIcon
          name="auditing"
          :style="{
            width: '20px',
            height: '20px',
          }"
        />
        <span style="color: inherit">待审核</span>
        <span :class="['point', { isHover: hoverMenu === '4' }]">
          {{ hoverMenu === "4" ? "67" : "" }}
        </span>
      </div>
      <template #title>
        <div class="aside-menu__item--text">
          <span>待审核</span>
          <span v-if="!isCollapse" class="num">67</span>
        </div>
      </template>
    </el-menu-item>
    <el-menu-item
      index="5"
      @mouseenter="hoverMenu = '5'"
      @mouseleave="hoverMenu = ''"
    >
      <div class="collapse-container" v-if="isCollapse">
        <SvgIcon
          name="err"
          :style="{
            width: '20px',
            height: '20px',
          }"
        />
        <span style="color: inherit">异常订单</span>
        <span :class="['point', { isHover: hoverMenu === '5' }]">
          {{ hoverMenu === "5" ? "110" : "" }}
        </span>
      </div>
      <template #title>
        <div class="aside-menu__item--text">
          <span>异常订单</span>
          <span v-if="!isCollapse" class="num">110</span>
        </div>
      </template>
    </el-menu-item>
    <el-menu-item
      index="6"
      @mouseenter="hoverMenu = '6'"
      @mouseleave="hoverMenu = ''"
    >
      <div class="collapse-container" v-if="isCollapse">
        <SvgIcon
          name="refund"
          :style="{
            width: '20px',
            height: '20px',
          }"
        />
        <span style="color: inherit">已退款</span>
        <span :class="['point', { isHover: hoverMenu === '6' }]">
          {{ hoverMenu === "6" ? "110" : "" }}
        </span>
      </div>
      <template #title>
        <div class="aside-menu__item--text">
          <span>已退款</span>
          <span v-if="!isCollapse" class="num">110</span>
        </div>
      </template>
    </el-menu-item>
    <el-menu-item
      index="7"
      @mouseenter="hoverMenu = '7'"
      @mouseleave="hoverMenu = ''"
    >
      <div class="collapse-container" v-if="isCollapse">
        <SvgIcon
          name="onfile"
          :style="{
            width: '20px',
            height: '20px',
          }"
        />
        <span style="color: inherit">已归档</span>
        <span :class="['point', { isHover: hoverMenu === '7' }]">
          {{ hoverMenu === "7" ? "110" : "" }}
        </span>
      </div>
      <template #title>
        <div class="aside-menu__item--text">
          <span>已归档</span>
          <span v-if="!isCollapse" class="num">110</span>
        </div>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<style lang="scss" scoped>
.el-menu--collapse {
  width: 70px;
  .el-menu-item {
    padding: 0;
    height: 70px;
    ::v-deep(.el-menu-tooltip__trigger) {
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.el-menu-vertical-demo {
  .el-menu-item {
    &.is-active {
      .num {
        color: var(--el-menu-active-color);
      }
    }
  }

  .collapse-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    img {
      width: 20px;
      height: 20px;
    }
    span {
      font-family: PingFang SC;
      font-size: 13px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: #202738;
    }
    .point {
      background: #d25c49;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      position: absolute;
      right: 4px;
      top: -2px;
    }
    .isHover {
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      line-height: 12px;
      text-align: left;
      width: fit-content;
      height: 14px;
      line-height: 14px;
      text-align: center;
      padding: 0 4px;
      color: #fff;
      border-radius: 12px;
      border-radius: 12px;
      left: 26px;
      top: -7px;
    }
  }
}
.aside-menu__group--text {
  margin-top: 20px;
  padding-left: 20px;
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  color: #99a3b7;
}
.aside-menu__item--text {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dotted #b6bdcc;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  .num {
    font-family: Roboto;
    font-size: 12px;
    font-weight: 400;
    text-align: right;
    color: #9ba3b5;
  }
}
</style>
